<template>
	<div class="cart">
		<div class="product" v-show="visible && calculations.total">
			<div class="product__header">
				<div class="product__header__all" @click="setCartChecked(shopId)">
					<span
						class="product__header__icon iconfont"
						v-html="calculations.checkedAll ? '&#xe652;' : '&#xe667;'"
					></span>
					全选
				</div>
				<div class="product__header__clear">
					<span @click="clearCart(shopId)">清空购物车</span>
				</div>
			</div>
			<template v-for="item of productList" :key="item._id">
				<div class="product__item" v-if="item.count > 0">
					<div
						class="product__item__checked iconfont"
						v-html="item.checked ? '&#xe652;' : '&#xe667;'"
						@click="changeCartChecked(shopId, item._id)"
					></div>
					<img class="product__item__img" :src="item.imgUrl" />
					<div class="product__item__detail">
						<h4 class="product__item__title">{{item.name}}</h4>
						<p class="product__item__price">
							<span class="product__item__yen">&yen;{{item.price}}</span>
							<span class="product__item__origin">&yen;{{item.oldPrice}}</span>
						</p>
					</div>
					<div class="product__number">
						<span
							class="product__number__minus iconfont"
							@click="changeToCart(shopId, item._id, item, -1)"
						>&#xe691;</span>
						{{item.count || 0}}
						<span
							class="product__number__plus iconfont"
							@click="changeToCart(shopId, item._id, item, 1)"
						>&#xe668;</span>
					</div>
				</div>
			</template>
		</div>
		<div class="check">
			<div class="check__icon">
				<img
					class="check__icon__img"
					src="http://www.dell-lee.com/imgs/vue3/basket.png"
					alt="icon--img"
					@click="toggleShow"
				/>
				<div class="check__icon__tag">{{calculations.total}}</div>
			</div>
			<div class="check__info">
				总计：<span class="check__info__price">&yen; {{calculations.price}}</span>
			</div>
			<div class="check__btn" v-show="calculations.total > 0">
				<router-link :to="'/order/'+shopId">去结算</router-link>
			</div>
		</div>
	</div>
	<div
		class="mask"
		v-show="calculations.total && visible"
		@click="toggleShow"
	>
	</div>
</template>

<script>
	import { defineComponent, ref, computed } from 'vue'
	import { useRoute } from 'vue-router'
	import { useStore } from 'vuex'
	import { useCommonCartEffect } from './commonCartEffect'

	const useShowEffect = () => {
		const visible = ref(false)
		const toggleShow = () => {
			visible.value = !visible.value
		}
		return {
			visible,
			toggleShow
		}
	}

	const useCartEffect = (shopId) => {
		const store = useStore()
		const { cartList } = store.state
		const calculations = computed(() => {
			const result = { total: 0, price: 0, checkedAll: true }
			const productList = cartList[shopId]?.productList
			if (productList) {
				for (const key in productList) {
					result.total += productList[key].count
					if (productList[key].checked) {
						result.price += productList[key].count * productList[key].price
					}
					if (!productList[key].checked && productList[key].count > 0) {
						result.checkedAll = false
					}
				}
			}
			result.price = (result.price).toFixed(2)
			return result
		})
		const productList = computed(() => {
			const productList = cartList[shopId]?.productList || {}
			return productList
		})
		const { visible, toggleShow } = useShowEffect()
		const { changeToCart } = useCommonCartEffect()
		const changeCartChecked = (shopId, productId) => {
			store.commit('changeCartChecked', { shopId, productId })
		}
		const clearCart = (shopId) => {
			store.commit('clearCartPoduct', { shopId })
			toggleShow()
		}
		const setCartChecked = (shopId) => {
			store.commit('setCartChecked', { shopId })
		}
		return {
			visible,
			productList,
			changeToCart,
			clearCart,
			toggleShow,
			calculations,
			setCartChecked,
			changeCartChecked
		}
	}

	export default defineComponent({
		name: 'Cart',
		setup() {
			const route = useRoute()
			const shopId = route.params.id
			const {
				productList,
				changeToCart,
				clearCart,
				visible,
				toggleShow,
				calculations,
				setCartChecked,
				changeCartChecked
			} = useCartEffect(shopId)
			return {
				shopId,
				visible,
				productList,
				toggleShow,
				changeToCart,
				clearCart,
				calculations,
				setCartChecked,
				changeCartChecked
			}
		}
	})
</script>

<style lang="scss" scoped>
	@import '../../style/variable.scss';
	@import '../../style/mixins.scss';

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		background-color: rgba(0, 0, 0, .5);
	}
	.cart {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		background-color: #fff;
		.product {
			flex: 1;
			overflow-y: scroll;
			background: #fff;
			&__header {
				display: flex;
				line-height: .52rem;
				border-bottom: .01rem solid $content-background;
				&__all {
					width: .64rem;
					margin-left: .18rem;
				}
				&__icon {
					display: inline-block;
					vertical-align: top;
					color: #0091ff;
					font-size: .2rem;
					margin-right: .1rem;
				}
				&__clear {
					flex: 1;
					text-align: right;
					font-size: .14rem;
					color: $content-font-color;
					margin-right: .16rem;
				}
			}
			&__item {
				position: relative;
				display: flex;
				padding: .12rem 0;
				margin: 0 .16rem;
				border-bottom: .01rem solid $content-background;
				&__checked {
					line-height: .5rem;
					margin-right: .2rem;
					color: #0091ff;
					font-size: .2rem;
				}
				&__detail {
					overflow: hidden;
				}
				&__img {
					width: .46rem;
					height: .46rem;
					margin-right: .16rem;
				}
				&__title {
					margin: 0;
					line-height: .2rem;
					font-size: .14rem;
					color: $content-font-color;
					@include ellipsis;
				}
				&__price {
					margin: .06rem 0 0 0;
					line-height: .2rem;
					font-size: .14rem;
					color: $highlight-fontColor;
				}
				&__yen {
					font-size: .16rem;
					margin-right: .1rem;
				}
				&__origin {
					font-size: .12rem;
					line-height: .2rem;
					color: #999;
					text-decoration: line-through;
				}
				.product__number {
					position: absolute;
					right: 0;
					bottom: .26rem;
					line-height: .18rem;
					&__minus {
						position: relative;
						top: .02rem;
						color: #666;
						margin-right: .05rem;
					}
					&__plus {
						position: relative;
						top: .02rem;
						color: $btn-bgColor;
						margin-left: .05rem;
					}
				}
			}
		}
		.check {
			display: flex;
			height: .49rem;
			line-height: .49rem;
			border-top: .01rem solid $content-background;
			&__icon {
				position: relative;
				width: .84rem;
				&__img {
					display: block;
					margin: .12rem auto;
					width: .28rem;
					height: .26rem;
				}
				&__tag {
					position: absolute;
					left: .35rem;
					top: .04rem;
					padding: 0 .04rem;
					width: .2rem;
					height: .2rem;
					line-height: .2rem;
					background-color: $highlight-fontColor;
					border-radius: .1rem;
					font-size: .12rem;
					text-align: center;
					color: #fff;
					transform: scale(0.5);
					transform-origin: left center;
				}
			}
			&__info {
				flex: 1;
				color: $content-font-color;
				font-size: .12rem;
				&__price {
					color: $highlight-fontColor;
					font-size: .18rem;
				}
			}
			&__btn {
				width: .98rem;
				line-height: .5rem;
				background: #4fb0f9;
				font-size: .14rem;
				text-align: center;
				a {
					text-decoration: none;
					color: #fff;
				}
			}
		}
	}
</style>
